@charset "utf-8";
.wrapper{
	width: 1190px;
	margin: 0 auto;
}
.spinner {
    font-size: 20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 10px rgba(58, 168, 237, .2);
}
.circle{
	width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 8px rgba(58, 168, 237, .2);
}
.circle:after{
	position: absolute;
    clip: rect(0, 100px, 100px, 20px);
    width: 100px;
    height: 100px;
    content: '';
    border-radius: 50%;
    box-shadow: inset 0 0 0 8px #3aa8ed;
}
.spinner i {
    position: absolute;
    clip: rect(0, 100px, 100px, 20px);
    width: 100px;
    height: 100px;
    animation: spinner-circle-clipper 1s ease-in-out infinite;
}
/*@keyframes spinner-circle-clipper {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}*/
.spinner i:after {
    position: absolute;
    clip: rect(0, 100px, 100px, 20px);
    width: 100px;
    height: 100px;
    content: '';
    animation: spinner-circle 1s ease-in-out infinite;
    border-radius: 50%;
    box-shadow: inset 0 0 0 10px #3aa8ed;
}
/*@keyframes spinner-circle {
    0% {
        transform: rotate(-180deg);
    }

    100% {
        transform: rotate(180deg);
    }
}*/